<script>
import currency from '@/utils/currency'
export default {
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        currency: {
            type: String,
            default: 'CNY'
        }
    },
    created() {
        const index = this.currencyList.findIndex(item => item.code === this.currency);
        this.currentIndex = index === -1 ? 0 : index;
    },
    data() {
        return {
            show: false,
            currentIndex: 0,
            currencyList: currency.currencyList
        }
    },
    methods: {
        confirm() {
            this.$emit('confirm', this.currencyList[this.currentIndex])
            this.show = false
        }
    }
}
</script>
<template>
    <div>
        <div style="overflow: auto;" class="flex-1">
            <div class="currency-item flex  border p-20 mb-20 rounded-18">
                <div class="icon flex-shrink-0" :class="'icon' + currencyList[currentIndex].code">
                    {{ currencyList[currentIndex].symbol }}
                </div>
                <div class="between w-full">
                    <div>
                        <div class="currency-item-name font-bold fz28 mb-8">{{ currencyList[currentIndex].name }}
                            ({{ currencyList[currentIndex].code }})
                        </div>
                        <div class="currency-item-country text-gray-600 fz24">{{ currencyList[currentIndex].country }}
                        </div>
                    </div>
                    <div class="flex text-gray-600 fz24" @click="show = true" v-if="!disabled">
                        切换货币
                        <image src="/static/icon/right-2.png" class="w-10 h-20 ml-16"></image>
                    </div>
                </div>
            </div>
        </div>

        <u-popup :show="show" @close="show = false">
            <div class="currency-list p-30 flex-col" style="height: 80vh">
                <div class="between" style="align-items: flex-start;">
                    <div class="flex-shrink-0">
                        <div class="font-bold fz35">货币选择</div>
                        <div class="fz24 mt-8 mb-30 text-gray-600">请在下方选择您需要的货币</div>
                    </div>
                    <div @click="show = false">
                        <image src="/static/icon/close.png" class="w-20 h-20"></image>
                    </div>
                </div>
                <div style="overflow: auto;" class="flex-1">
                    <div class="currency-item flex  border p-20 mb-20 rounded-18" v-for="(item, index) in currencyList"
                        :key="item.code" @click="currentIndex = index" :class="{ 'active': currentIndex == index }">
                        <div class="icon flex-shrink-0" :class="'icon' + item.code">
                            {{ item.symbol }}
                        </div>
                        <div class="between w-full">
                            <div>
                                <div class="currency-item-name font-bold fz28 mb-8">{{ item.name }}</div>
                                <div class="currency-item-country text-gray-600 fz24">{{ item.country }}</div>
                            </div>
                            <div class="currency-item-symbol text-gray-400 font-bold code">{{ item.code }}</div>
                        </div>
                    </div>
                </div>

                <div class="font-bold w-full h-100 center  rounded-18 fz30 flex-shrink-0 mt-10"
                    style="background-color: #333;color: #fff;" @click="confirm">确定选择
                </div>
            </div>
        </u-popup>
    </div>

</template>

<style lang="less">
.icon {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
    margin-right: 16rpx;
    font-weight: bold;
    font-size: 30rpx;
    color: #fff;
}

.currency-item {
    border: 2px solid #f1f1f1 !important;
}

.code {
    font-family: "Lucida Console";
    letter-spacing: 5rpx;
}

.active {
    border: 2px solid #38f !important;
    box-shadow: 0 0 10rpx 0 rgba(157, 179, 250, 0.5);
}

/* 中国 - 红色 */
.iconCNY {
    background: linear-gradient(180deg, #D83A3A, #F4A3A3);
}

/* 俄罗斯 - 蓝色 */
.iconRUB {
    background: linear-gradient(180deg, #4A80D7, #A3C0F4);
}

/* 哈萨克斯坦 - 天蓝色 */
.iconKZT {
    background: linear-gradient(180deg, #2FAECC, #A3DAE4);
}

/* 白俄罗斯 - 绿色 */
.iconBYN {
    background: linear-gradient(180deg, #4CAF50, #A3E4A3);
}

/* 吉尔吉斯斯坦 - 红色 */
.iconKGS {
    background: linear-gradient(180deg, #D73A3A, #F4A3A3);
}

/* 乌兹别克斯坦 - 天蓝色 */
.iconUZS {
    background: linear-gradient(180deg, #2FAECC, #A3DAE4);
}

/* 土库曼斯坦 - 绿色 */
.iconTMT {
    background: linear-gradient(180deg, #2E8B57, #A3D4B0);
}

/* 乌克兰 - 蓝色 */
.iconUAH {
    background: linear-gradient(180deg, #1E73BE, #A3C4E4);
}

/* 塔吉克斯坦 - 红色 */
.iconTJS {
    background: linear-gradient(180deg, #D73A3A, #F4A3A3);
}
</style>